<template>
    <div class="login">
      <div class="content">
        <div class="left">
          <div>
            <div class="logo">空间装备作战推演与实验评估系统</div>
            <div class="name">登录</div>
            <el-form ref="ruleFormRef" :rules="rules" :model="form">
              <el-form-item prop="userName" class="inputBox">
                <div class="title">账号名称</div>
                <el-input v-model="form.userName" />
                <i class="iconfont icon-yonghu"></i>
              </el-form-item>
  
              <el-form-item prop="password" class="inputBox">
                <div class="title">账号密码</div>
                <el-input
                  v-model="form.password"
                  :type="eyes ? 'password' : 'text'"
                />
  
                <i
                  class="iconfont yj"
                  :class="eyes ? 'icon-tianchongxing- i' : 'icon-mimakai'"
                ></i>
                <i
                  class="iconfont eyes"
                  :class="eyes ? 'icon-biyan' : 'icon-zhengyan'"
                  @click="eyes = !eyes"
                ></i>
              </el-form-item>
            </el-form>
            <el-button
              class="login-btn"
              type="primary"
              :loading="loading"
              @click="login(ruleFormRef)"
              >登录</el-button
            >
          </div>
        </div>
        <div class="right">
          <img class="satellite " src="@/assets/imgs/login/u1950.png" alt=""
          width="300" height="300"
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, onUnmounted, inject, watch } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { useStore } from "vuex";
  import { loginAPI } from "@/api/login";
  const router = useRouter();
  const store = useStore();
  const form = ref({
    userName: "admin",
    password: "123456",
  });
  const rules = {
    userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  };
  const ruleFormRef = ref(null);
  const eyes = ref(true);
  const loading = ref(false);
  const login = async (formEl) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        try {
          loading.value = true;
          let res = await loginAPI(form.value);
  
          loading.value = false;
          store.commit("LOGIN_IN", res.data.token);
        //   router.replace("/");
        router.push('/')
          formEl.resetFields();
        } catch (error) {
          console.log(error);
        }
      } else {
        console.log("error submit!", fields);
        setTimeout(() => {
          loading.value = false;
        }, 200);
      }
    });
    setTimeout(() => {
      loading.value = false;
    }, 200);
  };
  onMounted(() => {});
  </script>
  <style scoped lang="scss">
  .login {
    width: 100%;
    height: 100%;
    // background: url(@/assets/imgs/login/u1916.png) no-repeat;
    background: #000;
    background-size: 100% 100%;
    color: #fff;
  
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      .left {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .logo {
          font-size: 34px;
          margin-bottom: 100px;
        }
        .name {
          width: 60px;
          text-align: center;
          font-size: 30px;
          color: #169bd5;
          font-weight: bold;
          border-bottom: 5px solid #169bd5;
        }
  
        .inputBox {
          width: 400px;
          position: relative;
          .title {
            color: #5f6269;
          }
          .iconfont {
            font-size: 20px;
          }
          .icon-yonghu,
          .yj {
            position: absolute;
            top: 50%;
            left: -5px;
          }
          .eyes {
            position: absolute;
            right: 0;
            top: 50%;
          }
        }
        .login-btn {
          width: 200px;
        }
      }
      .right {
        height: 100%;
        width: 50%;
        background: url(@/assets/imgs/login/u1916.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .satellite {
          position: absolute;
          top: 150px;
          right: 0;
        }
      }
    }
  }
  :deep() {
    .el-form-item.is-error .el-input__wrapper{
      box-shadow: none !important;
    }
    .el-input__wrapper {
      background: transparent;
      border: none;
      box-shadow: none;
      border-bottom: 2px solid #ffffff;
      border-radius: 0;
      padding-left: 20px;
      width: 100px;
      .el-input__inner {
        color: #fff;
      }
    }
  }
  </style>
  